<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>欢迎来到Warlock_blogs</title>
  <link rel="stylesheet" href="css/scroll_bar.css">
  <link rel="stylesheet" href="css/slideshow.css">
  <link rel="stylesheet" href="css/article.css">
  <link rel="icon" href="Photo/魔理沙.png" type="image/x-icon">
  <link rel="stylesheet" href="css/nav.css">
  <link rel="stylesheet" href="css/my_hobby.css">
  <link rel="stylesheet" href="External_libraries/font-awesome-4.7.0/css/font-awesome.min.css">
  
</head>

<body>
  <div id="scroll_path"></div>
  <div id="progress_bar"></div>
  <!-- 顶部菜单 -->
  <nav class="top_nav">
    <div class="logo">
      <i class="fa fa-tree" aria-hidden="true"></i>
      <a>Welcome!</a>
    </div>
    <div class="nav_1 nav_ele">
      <i class="fa fa-home" aria-hidden="true"></i>
      <a>首页</a>
    </div>
    <div class="nav_2 nav_ele">
      <i class="fa fa-book" aria-hidden="true"></i>
      <a>日志</a>
    </div>
    <div class="nav_3 nav_ele">
      <i class="fa fa-user-circle" aria-hidden="true"></i>
      <a href="https://moushicheng.gitee.io/personal_url/" style="text-decoration: none;color: white;">关于</a>
    </div>
    <div class="nav_4 nav_ele">
      <i class="fa fa-paper-plane" aria-hidden="true"></i>
      <a>更多</a>
    </div>
  </nav>
  <!-- 轮播图 -->
  <div class="slideshow ">
    <section class="photos">
      <div class="article_1 pub_art">
        <div class="photo"><img src="Photo/壁纸 (1).jpg"></div>
        <div class="masking mask_1">
          <div class="word">
            <h1>Hello,world!</h1>
            <p>这里是哲学术士的blogs呀!</p>
            <a>阅读更多</a>
          </div>
        </div>
      </div>
      <div class="article_2 pub_art">
        <div class="photo"><img src="Photo/壁纸 (2).jpg"></div>
        <div class="masking mask_2">
          <div class="word">
            <h1>无边落木萧萧下</h1>
            <p>第一个个人网页</p>
            <a>阅读更多</a>
          </div>
        </div>
      </div>
      <div class="article_3 pub_art">
        <div class="photo"><img src="Photo/壁纸 (3).jpg"></div>
        <div class="masking mask_3">
          <div class="word">
            <h1>抢红包的博弈与较量</h1>
            <p>奇思妙想小项目</p>
            <a>阅读更多</a>
          </div>
        </div>
      </div>
      <div class="article_3 pub_art">
        <div class="photo"><img src="Photo/壁纸 (4).jpg"></div>
        <div class="masking mask_4">
          <div class="word">
            <h1>网上答题(C语言实现</h1>
            <p>偶然做来玩玩O(∩_∩)O</p>
            <a>阅读更多</a>
          </div>
        </div>
      </div>
    </section>
    <div class="bottom">
      <div class="next_bottom"> <i class="fa fa-chevron-right"></i></div>
      <div class="prev_bottom"><i class="fa fa-chevron-left"></i></div>
    </div>
    <div class="article_direction">
      <ul>
        <li class="li_1 direction_li"></li>
        <li class="direction_li"></li>
        <li class="direction_li"></li>
        <li class="direction_li"></li>
      </ul>
    </div>
  </div>
  <!-- 下拉主体元素 -->
  <article>
    <div class="announcement piece">
      <div class="headline_wrap">
        <i class="fa fa-bookmark-o" aria-hidden="true"></i>
        <h1>公告</h1>
      </div>
      <p>您好啊?欢迎来到我的博客，目前还在建设中,很多功能基本没有（才不是因为懒勒!</p>
      <p>https://gitee.com/moushicheng/my_blogs <-该博客项目的地址</p> <p>吐槽一句,大一下学期真的好忙!</p>
    </div>

    <div class="recommend_article ">
      <div class="headline_wrap piece">
        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
        <h1>推荐文章</h1>
      </div>

      <div class="article_piece">
        <div class="big_piece piece">
          <div class="photo"><img src="Photo/壁纸 (2).jpg"></div>
          <div class="mask">
            <div class="word">
              <h1>Website</h1>
              <h2>个人网页</h2>
              <p>当初学了一点前端忍不住创作欲下的结果</p>
              <a>阅读更多</a>
            </div>
          </div>
        </div>
        <div class="medium_piece piece">
          <div class="photo"><img src="Photo/壁纸 (6).jpg"></div>
          <div class="mask">
            <div class="word">
              <h1>Article</h1>
              <h2>2020年日志集</h2>
              <p>奇怪的学习档案集</p>
              <a>阅读更多</a>
            </div>
          </div>
        </div>
        <div class="medium_piece piece">
          <div class="photo"><img src="Photo/壁纸 (7).jpg"></div>
          <div class="mask">
            <div class="word">
              <h1>Website</h1>
              <h2>登录框制作</h2>
              <p>作为未来该网页的登陆框</p>
              <a href="login.html">阅读更多</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="my_hobby">
      <div class="headline_wrap piece">
        <i class="fa fa-magic" aria-hidden="true"></i>
        <h1>我的爱好</h1>
      </div>
      <div class="hobby_piece ">
        <div class="visual_per vp1">
          <p>Animation</p>
        </div>
        <div class="percent " title="70">0%</div>
      </div>
      <div class="hobby_piece ">
        <div class="visual_per vp2">
          <p>Font_end</p>
        </div>
        <div class="percent" title="80">0%</div>
      </div>
      <div class="hobby_piece ">
        <div class="visual_per vp3">
          <p>Games</p>
        </div>
        <div class="percent" title="70">0%</div>
      </div>
      <div class="hobby_piece ">
        <div class="visual_per vp4">
          <p>social_contact</p>
        </div>
        <div class="percent" title="40">0%</div>
      </div>
      <div class="hobby_piece ">
        <div class="visual_per vp5">
          <p>Web_crawler</p>
        </div>
        <div class="percent" title="60">0%</div>
      </div>
      <div class="hobby_piece ">
        <div class="visual_per vp6">
          <p>montage</p>
        </div>
        <div class="percent" title="50">0%</div>
      </div>
    </div>

  </article>

</body>
<script src="js/scroll_bar.js"></script>
<script src="js/viewport.js"></script>
<script src="js/slideshow.js"></script>
<script src="js/nav_color.js"></script>
<script src="js/my_hobby.js"></script>
</html>